<%@ page pageEncoding="UTF-8" contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>私信聊天</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/index.css"/>
    <script src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/common.js"></script>
    <script src="${pageContext.request.contextPath}/js/vue.js"></script>
</head>
<body class="chat" >
<!-- 好友列表 -->
<div id="smain">
    <c:set value="${sessionScope.local_session_user_flag}" var="currentUser"></c:set>
<div class="list" >
    <span class="title">最近联系</span>
    <div class="user-list" >
        <!-- 没有联系人的提示内容 -->
        <!-- <a class="no-data"><img src="./images/404.svg"/>暂无联系人</a> -->

        <!-- 联系人列表 -->
        <a class="data" :class="{active:isactive==u.user_id }" v-for="(u,index) in userlist" @click="userMsg(u.user_id,u.nick_name)">
            <img :src="'${pageContext.request.contextPath}/msg/photo?p='+u.photo" />
            <em>{{u.nick_name}}</em>
            <%--<b class="dot" v-show="isdot"></b>--%>
        </a>


    </div>
</div>
<!-- 聊天窗口 -->
<div class="content">
    <!-- 没有选择联系人的情况下，默认显示的效果 -->
    <!-- <a class="no-data"><img src="./images/404.svg"/>选择联系人</a> -->

    <div class="header clearfix" v-show="isblack">
        <span>与<b>{{reciveName}}</b>的对话</span>
        <a class="btn" @click="blackMsg">加入黑名单</a>
    </div>
    <!-- 显示聊天内容 -->
    <section class="msg">
        <!-- 聊天内容， 没有聊天内容的时候，提示  开始聊天 -->
        <!-- <a class="no-data">无聊天内容，开始聊天</a> -->
        <div v-for="m in userMsgs" v-show="isblack" :class="m.send_id==${currentUser.id}?'t':'f'" >
            <!-- 右侧聊天框，因为采用浮动定位，需要添加  clear:both清除浮动 -->
            <div style="clear: both;"></div>
            <div class="info" >
                <img :src="'${pageContext.request.contextPath}/msg/photo?p='+m.photo" />
                <span class="user-msg">{{m.nick_name}} <time>{{getTime(m.send_time)}}</time></span>
            </div>
            <div class="text" v-text="m.message"></div>
        </div>

        <%--<div class="t">
            <div class="info">
                <img src="${pageContext.request.contextPath}/images/chat.gif" />
                <span class="user-msg">love残夜<time>2022-08-13 19:46:19</time></span>
            </div>
            <div class="text">可以，你可以加我的QQ:472759903,备注:需要电子书哟</div>
        </div>
        </div>
        <!-- 右侧聊天框，因为采用浮动定位，需要添加  clear:both清除浮动 -->
        <div style="clear: both;"></div>

        <div class="f">
            <div class="info">
                <img src="${pageContext.request.contextPath}/images/user.jpg" />
                <span class="user-msg">~飘雪<time>2022-08-13 18:48:48</time></span>
            </div>
            <div class="text">已加QQ,万分谢谢</div>
        </div>--%>

    </section>
    <!-- 显示 发送按钮 -->
    <footer>
        <textarea  placeholder="请输入聊天信息" v-model="textarea" @keydown.enter="sendMsg"></textarea>
        <a class="btn" v-show="isblack" @click="sendMsg">发送消息</a>
    </footer>
</div>
</div>
<script>
    new Vue({
        el:"#smain",
        data:{
            userlist:[],
            userMsgs:1,
            reciveName:"",
            receiveId: "",
            textarea:"",
            myBlacks:[],
            unreadcount:"",
            isactive:1,
            isblack:false,
            isdot:true,
            timer:null,
            ranPrivate:'${param.r}'
        },
        created(){
            this.msglist();
        },
        updated(){
            // this.msglist();
        },
        watch:{
            userMsgs:function (val,oldVal){
                this.timer=setInterval(()=>{
                    this.nextTick();
                    clearInterval(this.timer);
                },100);
            },
            //点击私信显示私信列表
            ranPrivate:function (val,oldVal){
                this.msglist();
            }

        },
        methods:{
            msglist(){
                fetch("${pageContext.request.contextPath}/msg/msglist?umsgId=${param.umsgid}").then(ret=>{
                    if(ret.status){
                        this.userlist = ret.data.list;
                    }
                })
            },
            //发送消息后调用，显示最新消息
            sendedread(){
                fetch("${pageContext.request.contextPath}/msg/userMsg?recid="+this.receiveId).then(ret=>{
                    if(ret.status){
                        this.userMsgs = ret.data;
                    }
                })
            },
            userMsg(event,eName){
                this.isblack=true;
                this.reciveName=eName;
                this.receiveId = event;
                this.isactive=event;
                this.readed();
                //this.unreadNum();

                fetch("${pageContext.request.contextPath}/msg/userMsg?recid="+this.receiveId).then(ret=>{
                    if(ret.status){
                        this.userMsgs = ret.data;

                    }
                })

            },
            getTime(timestamp){
                let date = new Date(timestamp);
                return date.format("yyyy-MM-dd HH:mm:ss")
            },
            sendMsg(event) {
                event.preventDefault();
                if (this.textarea==""||this.textarea==null){
                    $(event.target).tooltips("输入框不能为空") ;
                    this.textarea="";
                }else{
                    fetch("${pageContext.request.contextPath}/msg/sendMsg?recvid="+this.receiveId+"&message="+this.textarea).then(ret=>{
                        if(ret.status){
                            this.textarea="";
                            this.sendedread()
                            //this.userMsg(this.receiveId,this.reciveName);
                        }
                    })
                }
            },
            blackMsg(event){
                fetch("${pageContext.request.contextPath}/msg/black?bid="+this.receiveId).then(ret=>{
                    if(ret.status){
                        $(event.target).tooltips("成功加入黑名单") ;
                        this.msglist();
                    }
                })
                this.isblack=false;
            },
            myBlack(){
                fetch("${pageContext.request.contextPath}/msg/myblack").then(ret=>{
                    if(ret.data){
                        this.myBlacks = ret.data.list;
                    }
                })
            },
            //点击未读变已读
            readed(){
                fetch("${pageContext.request.contextPath}/msg/readed?cRid="+this.receiveId).then(ret=>{
                    if(ret.data){
                        this.myBlacks = ret.data.list;
                    }
                })
            },
            //未读消息数
            unreadNum(){
                fetch("${pageContext.request.contextPath}/msg/unRead").then(ret=>{
                    this.unreadCount=ret.data;
                    if(ret.data==0){
                        this.isdot=false;
                    }
                })
            },
            nextTick(){
                $('.msg').scrollTop($(".msg")[0].scrollHeight);
            }
        }
    })

</script>
</body>
</html>

